<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import { showToast } from 'vant'
import {get,post} from '@/utils/request'
const username = ref('')
const password = ref('')
const phone=ref('')
const router=useRouter()
// 登录逻辑占位
const onRegister = async () => {
  try{
    let res=await post('/wyq/register',{username:username.value,password:password.value,phone:phone.value})
    showToast(res.data.msg)
    if(res.data.code==400){
      return
    }else{
      setTimeout(()=>{
      router.push(`/ziliao?username=${username.value}`)
    },2000)
    }

  }catch(err:any){
    console.log(err)
  }
}
</script>

<template>
  <div class="login-wrapper">
    <div class="login-body">
      <h3 class="login-title">注册您的账号</h3>

      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入账号"
        type="text"
        input-align="left"
        clearable
        class="field"
      />

      <van-field
        v-model="password"
        label="密码"
        type="password"
        placeholder="请输入密码"
        input-align="left"
        clearable
        class="field"
      >
      </van-field>
      <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        type="text"
        input-align="left"
        clearable
        class="field"
      />

      <van-button type="primary" block round class="login-button" @click="onRegister">
        注册
      </van-button>

      <div class="divider">其他登录方式</div>

      <div class="icons">
        <van-icon name="wechat" size="26" />
        <van-icon name="qq" size="26" />
        <van-icon name="contact" size="26" />
      </div>
    </div>

    <div class="register">
      已经拥有账户？
      <span class="register-link" @click="()=>{router.push(`/login`)}">现在登录</span>
    </div>
  </div>
</template>

<style scoped>
.login-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 32px 24px;
  box-sizing: border-box;
}

.login-title {
  text-align: center;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 16px;
}

.login-button {
  margin-top: 12px;
  background-color: black;
  border: none;
}

.forget {
  margin-top: 20px;
  font-size: 12px;
  text-align: right;
  color: #666;
  text-align: center;
}

.divider {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 28px 0 16px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.register {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.register-link {
  color: #000;
  margin-left: 4px;
  cursor: pointer;
}
</style>
